<template>
  <div class="online-tag" :class="apStatus" @click="apDialogVisible = true">
    <template v-if="apStatus === 'on-line'">●&nbsp;在线</template>
    <template v-else-if="apStatus === 'off-line'">●&nbsp;离线</template>
    <template v-else>●&nbsp;未配置</template>
  </div>
  <div class="ap-wrap" v-if="apDialogVisible">
    <div class="ap-header">
      <div class="label">系统提示</div>
      <img
        src="@/assets/icons/tool-close.png"
        alt="关闭"
        class="close-btn"
        @click="apDialogVisible = false"
      />
    </div>
    <div class="ap-inner">
      <div class="inner-left" v-if="apStatus === 'on-line'">
        <img src="@/assets/img/ap-connected.png" alt="" />
        <div class="label">墨小猫精灵 已连接</div>
        <n-button type="primary" size="large" @click="openApServer">查看配置</n-button>
      </div>
      <div class="inner-left" v-else-if="apStatus === 'off-line'">
        <img src="@/assets/img/ap-not-configured.png" alt="" />
        <div class="label">墨小猫精灵 已离线</div>
        <div class="sub-text">点击下方按钮进行配置</div>
        <n-button type="primary" size="large" @click="openApServer">立即配置</n-button>
      </div>
      <div class="inner-left" v-else>
        <img src="@/assets/img/ap-offline.png" alt="" />
        <div class="label">墨小猫精灵 未配置</div>
        <div class="sub-text">点击下方按钮进行配置</div>
        <n-button type="primary" size="large" @click="openApServer">立即配置</n-button>
      </div>
      <div class="inner-right">
        <img src="@/assets/img/ewm-code.png" alt="登录二维码" />
        <div class="label">扫码 查看使用说明/联系客服</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, computed, onMounted, onUnmounted} from 'vue';
import { startApServer } from '@/utils/ipcRenderer';
import {getApIp} from "@/api/base";
import {useCourse} from "@/store/modules/course";
const apDialogVisible = ref(false)
function openApServer(){
  startApServer();
  apDialogVisible.value = false;
}
const apStatus = computed(() => {
  return useCourse().getApStatus;
})
let timer: any = null;
onMounted(() => {
  timer = setInterval(() => {
    getApIp().then((res) => {
      if (res[0]) {
        useCourse().setApId(res[0]);
        useCourse().setApStatus('on-line');
      } else {
        useCourse().setApId('');
        useCourse().setApStatus('off-config');
      }
    }).catch(err => {
      useCourse().setApId('');
      useCourse().setApStatus('off-line');
    });
  }, 3000)
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="less" scoped>
.online-tag {
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  &.on-line {
    background: linear-gradient(90deg, #28d6b3 0%, #1cd0ad 100%);
  }
  &.off-line {
    background: linear-gradient(90deg, #bfcad5 0%, #92a4b4 100%);
  }
  &.off-config {
    background: linear-gradient(90deg, #bfcad5 0%, #92a4b4 100%);
  }
}
.ap-wrap {
  width: 610px;
  height: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  margin-left: -305px;
  display: flex;
  flex-direction: column;
  z-index: 10;
.ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  height: 48px;
  background-color: #fcf7f2;
  border-radius: 16px 16px 0px 0px;
  font-size: 16px;
.close-btn {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
}
.ap-inner {
  display: flex;
  flex: 1;
  padding: 24px 0;
}
.inner-left {
  width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e6eaed;
img {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
}
.label {
  font-size: 18px;
  color: #1e232b;
  line-height: 24px;
}
.sub-text {
  font-size: 14px;
  line-height: 22px;
  color: #9ba2aa;
}
.n-button {
  margin-top: 24px;
  width: 196px;
  border-radius: 8px;
}
}
.inner-right {
  width: 290px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
img {
  width: 150px;
  height: 150px;
}
.label {
  font-size: 14px;
  line-height: 22px;
  color: #9ba2aa;
}
}
}
</style>
